<template>
	<view class="login">
		<view class="img-box">
			<image class="image" mode="widthFix" src="@/static/icons/logo.png" />
		</view>

		<view class="form-item">
			<input class="input" type="number" :value="phone" @input="changePhone" placeholder="手机号" maxlength="11" placeholder-class="placeholder" />
			<view class="get-code" @tap="getMsgCode">
				{{ msg }}
			</view>
		</view>
		<view class="form-item">
			<input class="input" type="number" :value="code" @input="changeCode" placeholder="短信验证码" maxlength="6" placeholder-class="placeholder" />
		</view>
		<!-- <view class="form-item">
			<input class="input" :value="inviteCode" @input="changeInviteCode" placeholder="邀请码" maxlength="4" placeholder-class="placeholder" />
		</view> -->

		<view class="submit" @tap="submit">登录或注册</view>
		<view class="desc">未注册嗨返账户用户可点击按钮直接注册</view>
	</view>
</template>

<script>
	export default {
		name: 'login',
		data() {
			return {
				phone: '',
				code: '',
				inviteCode: 'A888',
				qrCountDown: null,
				qrCountTime: 0,
				msg: '获取验证码'
			}
		},
		methods: {
			changePhone(e) {
				this.phone = e.detail.value;
			},
			changeCode(e) {
				this.code = e.detail.value;
			},
			changeInviteCode() {
				this.inviteCode = e.detail.value;
			},
			getMsgCode() {
				uni.getNetworkType({
					success: (res) => {
						if (res.networkType === 'none') {
							uni.showToast({
								title: '无网络连接',
								icon: 'none'
							});
						} else {
							let isPhone = /^1(((5[0-35-9][0-9])|([34879][0-9]{2}))[0-9]{7})$/;
							if (!isPhone.test(parseInt(this.phone))) {
								uni.showToast({
									title: '请输入正确的手机号',
									icon: 'none'
								});
								return false
							}
							if (this.qrCountTime === 0) {

								this.$service.common.common.getCode({
									phone: this.phone,
									app: 'uniapp',
									isSign: true
								}).then(res => {
									uni.showToast({
										title: res.msg
									});

									this.qrCountTime = 60;
									this.msg = this.qrCountTime + 's';
									this.qrCountDown = setInterval(() => {
										this.qrCountTime--;
										this.msg = this.qrCountTime + 's';
										if (this.qrCountTime === 0) {
											// 结束倒计时
											clearInterval(this.qrCountDown);
											this.msg = '重新获取';
										}
									}, 1000);
								}).catch(err => {
									uni.showToast({
										title: err.message,
										icon: 'none'
									})
								});
							}
						}
					}
				})
			},
			submit() {
				uni.getNetworkType({
					success: (res) => {
						if (res.networkType === 'none') {
							uni.showToast({
								title: '无网络连接',
								icon: 'none'
							});
						} else {
							let isPhone = /^1(((5[0-35-9][0-9])|([34879][0-9]{2}))[0-9]{7})$/;
							let isCode = /^\d{4}|\d{6}$/;
							if (!isPhone.test(parseInt(this.phone))) {
								uni.showToast({
									title: '请输入正确的手机号',
									icon: 'none'
								});
								return false
							}
							if (!isCode.test(this.code)) {
								uni.showToast({
									title: '请输入有效验证码',
									icon: 'none'
								});
								return false
							}
							if (!this.inviteCode) {
								uni.showToast({
									title: '请输入邀请码',
									icon: 'none'
								});
								return false
							}

							this.$service.common.common.loginUniApp({
								app: 'uniapp',
								phone: this.phone,
								code: this.code,
								inviteCode: 'A888'
							}).then(res => {
								uni.setStorageSync('token', res.token);
								// 获取用户信息
								// #ifdef H5
								this.$store.dispatch('getUserInfo', { versionCode: 140 });
								// #endif
								// #ifdef APP-PLUS
								plus.runtime.getProperty(plus.runtime.appid, wgtinfo => {
									let params = { ...wgtinfo };
									this.$store.dispatch('getUserInfo', params);
								});
								// #endif
								// 跳转至首页
								this.$Router.pushTab('/pages/index/index');
							}).catch(err => {
								uni.showToast({
									title: err.message,
									icon: 'none'
								})
							})
						}
					}
				});
			}
		}
	};
</script>

<style lang="scss" scoped>
	.login {
		background: #fff;
		height: 100vh;
		padding-top: 100rpx;

		.img-box {
			width: 130rpx;
			height: 86rpx;
			margin: 0 auto;

			.image {
				width: 100%;
				height: 100%;
				border-radius: 50%;
			}
		}

		.form-item {
			padding: 20rpx 0;
			width: 532rpx;
			margin: 60rpx auto 0;
			border-bottom: 2rpx solid #C9C9C9;
			@include flexBox(space-between);

			.input {
				flex: 1;
			}

			.get-code {
				font-size: 26rpx;
				color: $main-color;
			}

			.placeholder {
				color: #C9C9C9;
				font-size: 26rpx
			}
		}

		.submit {
			width: 532rpx;
			height: 80rpx;
			background: $main-color;
			line-height: 80rpx;
			text-align: center;
			border-radius: 50rpx;
			color: #fff;
			font-size: 32rpx;
			margin: 74rpx auto 20rpx;
		}

		.desc {
			width: 100%;
			text-align: center;
			font-size: 24rpx;
			color: #B7B5BF;
		}
	}
</style>
